<template>
  <el-form
    ref="regForm"
    :model="registerData"
    status-icon
    :rules="rules"
    label-width="120px"
    class="demo-registerData"
  >
    <el-form-item label="账号" prop="username">
      <el-input v-model="registerData.username" autocomplete="off" />
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input
        v-model="registerData.password"
        type="password"
        autocomplete="off"
      />
    </el-form-item>

    <el-form-item label="确认密码" prop="rpassword">
      <el-input
        type="password"
        v-model="registerData.rpassword"
        autocomplete="off"
      />
    </el-form-item>

    <el-form-item label="昵称" prop="nickname">
      <el-input v-model="registerData.nickname" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="handleRegister($refs.regForm)"
        >确认注册</el-button
      >
      <el-button @click="goback">返回</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { registerUser } from '@/api/user.js';
export default {
  data() {
    return {
      registerData: {
        username: '',
        password: '',
        rpassword: '',
        nickname: '',
      },
      rules: {
        username: [
          {
            required: true,
            validator: this.validateUsername,
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            validator: this.validatePass,
            trigger: 'blur',
          },
        ],
        rpassword: [
          {
            required: true,
            validator: this.validateRpass,
            trigger: 'blur',
          },
        ],
        nickname: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入昵称！',
          },
        ],
      },
    };
  },
  methods: {
    goback() {
      this.$router.back();
    },
    // 验证用户名
    validateUsername(rule, value, callback) {
      const uReg = /^[a-z0-9]\w{4,11}$/;
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else if (!uReg.test(value)) {
        callback(new Error('用户名格式错误！'));
        this.registerData.username = '';
      } else {
        callback();
      }
    },
    // 验证密码
    validatePass(rule, value, callback) {
      const pReg = /\w{6,12}/;
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (!pReg.test(value)) {
        callback(new Error('密码格式不正确！'));
        this.registerData.password = '';
      } else {
        if (this.registerData.rpassword !== '') {
          if (!this.$refs.regForm) return;
          this.$refs.regForm.validateField('rpassword', () => null);
        }
        callback();
      }
    },
    validateRpass(rule, value, callback) {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.registerData.password) {
        callback(new Error('两次密码不一致'));
      } else {
        callback();
      }
    },
    // 验证表单是否填写完毕
    handleRegister(formEl) {
      if (!formEl) return;
      formEl.validate((valid) => {
        if (valid) {
          console.log('可以提交!');
          registerUser(this.registerData).then((res) => {
            this.$refs.regForm?.resetFields();
            console.log('注册返回的res', res);
          });
        } else {
          console.log('禁止提交!');
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
